import { render } from 'vue'
// import { h, render } from 'vue'
// import { createVNode, render } from 'vue'

// createVNode  创建虚拟 DOM 节点 (简称 h 函数)
// render       把虚拟到渲染到页面中
// 🔔 createVNode+render 配合使用可以实现动态创建组件

import XtxMessage from './xtx-message.vue'

// 可以动态创建标签
// createVNode===h

// 创建虚拟DOM，但是还是在内存中
// const vNode = h('div', { class: 'xtx-message' })
const vNode = <div class= 'xtx-message'></div>
// 渲染到body中
render(vNode, document.body)
// 如果渲染到页面后，el 属性可以看到真的的 DOM
// console.log(vNode.el)

let timer
export default ({ type, message }) => {
  // 创建虚拟 DOM 节点
  // const Vnode = h(XtxMessage, { type, message })
  const Vnode = <XtxMessage type={type} message={message}></XtxMessage>

  // 把 Message 组件渲染到容器中
  render(Vnode, vNode.el)

  // 提示会自动消失
  clearTimeout(timer)
  timer = setTimeout(() => {
    // 清空容器，移除调 Message 创建出来的节点
    render(null, vNode.el)
  }, 2000)
}
